<template>
	<view v-if="show">
		<canvas :canvas-id='canvasId' :style="{width:imageInfo.width+'px',height:imageInfo.height+'px'}"></canvas>
	</view>
</template>

<script>
	import { getImageInfo } from '@/utils/imageUtil';
	import { useI18n } from "@/locales/setupI18n";
	const { t } = useI18n();
	export default {
		name: 'AdCanvas',
		props: {
			//	可见的
			visible: {
				type: Boolean,
				default: false
			},
			//	唯一标识符
			id: {
				type: String,
				default: 'ad_area_canvas'
			}
		},
		data() {
			const that = this;
			return {
				show: that.visible,	//可见的
				canvasId: that.id,	//唯一标识符
				// 图片信息
				imageInfo: {
					width: 0,	//	Number	图片宽度，单位px	
					height: 0,	//	Number	图片高度，单位px	
					path: '',	//	String	返回图片的本地路径	
					orientation: '',	//	String	返回图片的方向，up:默认、down:180度旋转、left:逆时针旋转90度、right:顺时针旋转90度、up-mirrored:同up，但水平翻转、down-mirrored:同down，但水平翻转、left-mirrored:同left，但垂直翻转、right-mirrored:同right，但垂直翻转
					type: '',	//	String	返回图片的格式
				},
				// 绘图上下文
				canvasContext: null
			}
		},
		onReady: function (e) {
			// console.log('created');
			const that = this;
			// that.canvasContext = uni.createCanvasContext(that.canvasId);
			// uni.showModal({
			// 	title: 'created',
			// 	content: JSON.stringify(that.canvasContext)
			// });
			
			// var context = uni.createCanvasContext('firstCanvas')
					
			// context.setStrokeStyle("#00ff00")
			// context.setLineWidth(5)
			// context.rect(0, 0, 200, 200)
			// context.stroke()
			// context.setStrokeStyle("#ff0000")
			// context.setLineWidth(2)
			// context.moveTo(160, 100)
			// context.arc(100, 100, 60, 0, 2 * Math.PI, true)
			// context.moveTo(140, 100)
			// context.arc(100, 100, 40, 0, Math.PI, false)
			// context.moveTo(85, 80)
			// context.arc(80, 80, 5, 0, 2 * Math.PI, true)
			// context.moveTo(125, 80)
			// context.arc(120, 80, 5, 0, 2 * Math.PI, true)
			// context.stroke()
			// context.draw()
		},
		methods: {
			/**
			 * 设置图片数据
			 * @param imgSrc 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
			 * @param errorMessageMode 错误消息提示模式: 'none' | 'modal' | 'message'
			 */
			async setImageData(imgSrc, errorMessageMode = 'message'){
				const that = this;
				return new Promise(async (resolve, reject) => {
					const imgInfo = await getImageInfo(imgSrc, errorMessageMode);
					if(!imgInfo){
						resolve(null);
						return;
					}
					that.imageInfo = imgInfo;
					
					const ctx = uni.createCanvasContext(that.canvasId);
					ctx.drawImage(imgSrc, 0, 0, imgInfo.width, imgInfo.height);
					ctx.draw();
					
					setTimeout(() => {
						resolve(imgInfo);
					}, 2000);
				});
			},
			/**
			 * 获取图片数据
			 * @param errorMessageMode 错误消息提示模式: 'none' | 'modal' | 'message'
			 */
			async getImageData(errorMessageMode = 'message'){
				const that = this;
				return new Promise(async (resolve, reject) => {
					const imgInfo = that.imageInfo;
					if(!imgInfo){
						resolve(null);
						return;
					}
					uni.canvasGetImageData({
						canvasId: that.canvasId,	// 画布标识，传入 <canvas /> 的 canvas-id（支付宝小程序是id、其他平台是canvas-id）
						x: 0,	// 将要被提取的图像数据矩形区域的左上角 x 坐标
						y: 0,	// 将要被提取的图像数据矩形区域的左上角 y 坐标
						width: imgInfo.width,	// 将要被提取的图像数据矩形区域的宽度
						height: imgInfo.height,	// 将要被提取的图像数据矩形区域的高度
						success(res) {
							// res.errMsg	String
							// res.width	Number	图像数据矩形的宽度
							// res.height	Number	图像数据矩形的高度
							// res.data	Uint8ClampedArray	图像像素点数据，一维数组，每四项表示一个像素点的rgba
							// console.log('canvasGetImageData_success', res);
							resolve(res);
						},
						fail(e) {
							// console.log('getImageInfo_fail', e);
							if (errorMessageMode === 'modal') {
								uni.showModal({
									title: t('common.errorText'),
									content: JSON.stringify(e),
									showCancel: false
								});
							} else if (errorMessageMode === 'message') {
								uni.showToast({
									title: JSON.stringify(e),
									// duration: 2000,
									icon: 'none'
								});
							}
							reject(e);
						}
					});
				});
			},
			/**
			 * 将像素数据绘制到画布
			 * @param data 像素数据
			 * @param errorMessageMode 错误消息提示模式: 'none' | 'modal' | 'message'
			 */
			async putImageData(data, errorMessageMode = 'message'){
				const that = this;
				return new Promise(async (resolve, reject) => {
					const imgInfo = that.imageInfo;
					if(!imgInfo){
						resolve(null);
						return;
					}
					if(!data){
						resolve(null);
						return;
					}
					uni.canvasPutImageData({
						canvasId: that.canvasId,	// 画布标识，传入 <canvas /> 的 canvas-id（支付宝小程序是id、其他平台是canvas-id）
						x: 0,	// 将要被提取的图像数据矩形区域的左上角 x 坐标
						y: 0,	// 将要被提取的图像数据矩形区域的左上角 y 坐标
						width: imgInfo.width,	// 将要被提取的图像数据矩形区域的宽度
						height: imgInfo.height,	// 将要被提取的图像数据矩形区域的高度
						data: data,
						success(res) {
							// res.errMsg	String
							// res.width	Number	图像数据矩形的宽度
							// res.height	Number	图像数据矩形的高度
							// res.data	Uint8ClampedArray	图像像素点数据，一维数组，每四项表示一个像素点的rgba
							// console.log('canvasGetImageData_success', res);
							resolve(res);
						},
						fail(e) {
							// console.log('getImageInfo_fail', e);
							if (errorMessageMode === 'modal') {
								uni.showModal({
									title: t('common.errorText'),
									content: JSON.stringify(e),
									showCancel: false
								});
							} else if (errorMessageMode === 'message') {
								uni.showToast({
									title: JSON.stringify(e),
									// duration: 2000,
									icon: 'none'
								});
							}
							reject(e);
						}
					});
				});
			}
		}
	}
</script>

<style>
</style>
